<template>
  <view>
    <YgSearch />
    <Tabs @change="changeTab" :list="tabList" :current="currentIndex" />

    <GoodsItem
      v-for="item in  goodsList"
      :key="item.goods_id"
      :data="item"
    />
  </view>
</template>

<script>
  import Tabs from "./components/Tabs.vue";
  import GoodsItem from './components/GoodsItem.vue'
  let params = {
    cid: '',
    query: '',
    pagenum: 1,
    pagesize: 10
  }
  // 设定一个总页码
  let totalPage = 0

  export default {
    components: { Tabs, GoodsItem },
    data() {
      return {
        tabList: [{ name: "综合" }, { name: "销量" }, { name: "价格" }],
        currentIndex: 0,
        goodsList: []
      };
    },
    // 页面加载生命周期
    onLoad(options) {
      // 每次页面进来重置翻页数据, 避免上一次看的分类污染当前页面
      params = {
        cid: '',
        query: '',
        pagenum: 1,
        pagesize: 10
      }
      // 设定一个总页码
      totalPage = 0

      params.cid = options.cid
      this.getGoods()
    },
    // 页面拖动到底生命周期
    onReachBottom() {
      console.log('到底了啊');

      // 拉到底的时候, 看看是不是已经最后一页
      if (totalPage === params.pagenum) {
        uni.showToast({title:'别再拉拉扯扯', icon: 'none'})
        return
      }
     
      // 1. 翻页, 页码加一
      params.pagenum ++
      // 2. 发送请求
      this.getGoods()
      // 3. 数据处理 不是在这写, 而是改一下加载时的逻辑
    },
    async onPullDownRefresh() {
      console.log('下拉啦!');
      // 下拉刷新
      // 1. 清空列表数据
      this.goodsList = []
      // 2. 重置页码(只重置页码其他不用管)
      params.pagenum = 1
      // 3. 发送异步请求加载数据
      await this.getGoods()
      // 4. 等待异步请求加载完毕, 关闭下拉窗口效果
      uni.stopPullDownRefresh()
    },
    methods: {
      changeTab(index) {
        this.currentIndex = index;
        // 这里是切换标签, 如果后端支持
        // 就应该根据当前标签在 params 设置排序参数
        // 然后手动触发下拉刷新的效果
        uni.startPullDownRefresh()
      },
      async getGoods() {
        const {message} = await this.$u.get('/goods/search', params)
        // 为了避免图片数据为 null 页面报错, 可以考虑那完数据, 现将所有图片地址
        // 是 null 都给复制一个 空字符串
        this.goodsList = [...this.goodsList, ...message.goods]
        
        // 拿到数据我们算一下总页数
        totalPage = Math.ceil(message.total / params.pagesize)
      }
    },
  };
</script>

<style lang="scss" scoped>
</style>